<template>
  <el-form label-position="top">
    <el-form-item label="位置">
      <div class="row-item">
        <div class="row-item-col">
          <div class="title">经度</div>
          <el-input v-model.number="cimPanelData.position_x" placeholder="" disabled />
        </div>
        <div class="row-item-col">
          <div class="title">纬度</div>
          <el-input v-model.number="cimPanelData.position_y" placeholder="" disabled />
        </div>
        <div class="row-item-col">
          <div class="title">海拔</div>
          <el-input v-model.number="cimPanelData.position_z" placeholder="" disabled />
        </div>
      </div>
    </el-form-item>
    <el-form-item label="旋转">
      <div class="row-item">
        <div class="row-item-col">
          <div class="title">X轴</div>
          <el-input v-model.number="cimPanelData.rotation_x" placeholder="" @change="updateAttr" />
        </div>
        <div class="row-item-col">
          <div class="title">Y轴</div>
          <el-input v-model.number="cimPanelData.rotation_y" placeholder="" @change="updateAttr" />
        </div>
        <div class="row-item-col">
          <div class="title">Z轴</div>
          <el-input v-model.number="cimPanelData.rotation_z" placeholder="" @change="updateAttr" />
        </div>
      </div>
    </el-form-item>
    <el-form-item label="缩放">
      <div class="row-item">
        <el-input v-model.number="cimPanelData.scale_x" placeholder="" @change="updateAttr" />
      </div>
    </el-form-item>
    <el-form-item label="偏移">
      <div class="row-item">
        <div class="row-item-col">
          <div class="title">X轴</div>
          <el-input v-model.number="cimPanelData.longitude" placeholder="" @change="updateAttr" />
        </div>
        <div class="row-item-col">
          <div class="title">Y轴</div>
          <el-input v-model.number="cimPanelData.latitude" placeholder="" @change="updateAttr" />
        </div>
        <div class="row-item-col">
          <div class="title">Z轴</div>
          <el-input v-model.number="cimPanelData.height" placeholder="" @change="updateAttr" />
        </div>
      </div>
    </el-form-item>
    <el-form-item label="Offset">
      <div class="row-item">
        <div class="row-item-col">
          <div class="title">X轴</div>
          <el-input v-model.number="cimPanelData.offset[0]" placeholder="" @change="updateEffect" />
        </div>
        <div class="row-item-col">
          <div class="title">Y轴</div>
          <el-input v-model.number="cimPanelData.offset[1]" placeholder="" @change="updateEffect" />
        </div>
        <div class="row-item-col">
          <div class="title">Z轴</div>
          <el-input v-model.number="cimPanelData.offset[2]" placeholder="" @change="updateEffect" />
        </div>
      </div>
    </el-form-item>
    <el-form-item label="Gravity">
      <div class="row-item">
        <div class="row-item-col">
          <div class="title">X轴</div>
          <el-input v-model.number="cimPanelData.gravityX" placeholder="" @change="updateEffect" />
        </div>
        <div class="row-item-col">
          <div class="title">Y轴</div>
          <el-input v-model.number="cimPanelData.gravityY" placeholder="" @change="updateEffect" />
        </div>
        <div class="row-item-col">
          <div class="title">Z轴</div>
          <el-input v-model.number="cimPanelData.gravityZ" placeholder="" @change="updateEffect" />
        </div>
      </div>
    </el-form-item>
    <el-form-item label="">
      <div class="row-item">
        <div class="row-item-col column">
          <div class="title">循环</div>
          <el-switch v-model="cimPanelData.loop" @change="updateEffect" />
        </div>
        <div class="row-item-col column">
          <div class="title">是否以米为单位</div>
          <el-switch v-model="cimPanelData.sizeInMeters" @change="updateEffect" />
        </div>
      </div>
    </el-form-item>
    <el-form-item label="">
      <div class="row-item">
        <div class="row-item-col column">
          <div class="title">粒子开始颜色</div>
          <div class="content">
            <el-color-picker v-model="cimPanelData.startColor" @change="updateEffect" />
            <el-input class="ml10" v-model="cimPanelData.startColor" placeholder="" disabled />
          </div>
        </div>
        <div class="row-item-col column">
          <div class="title">粒子结束颜色</div>
          <div class="content">
            <el-color-picker v-model="cimPanelData.endColor" @change="updateEffect" />
            <el-input class="ml10" v-model="cimPanelData.endColor" placeholder="" disabled />
          </div>
        </div>
      </div>
    </el-form-item>
    <el-form-item label="">
      <div class="row-item">
        <div class="row-item-col column">
          <div class="title">样式</div>
          <div class="content">
            <div class="style-image-wrap">
              <el-image :src="cimPanelData.image"></el-image>
            </div>
            <div class="style-image-btn" @click="choosePic">替换样式</div>
          </div>
        </div>
        <div class="row-item-col column">
          <div class="title">发射器类型</div>
          <div class="content emitter-wrap">
            <el-select v-model="cimPanelData.emitterStr" placeholder="请选择">
              <el-option
                v-for="item in emitterOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
            <el-input
              v-if="cimPanelData.emitterStr === 'CircleEmitter'"
              v-model.number="cimPanelData.circleRadius"
              @change="updateEffect"
            ></el-input>
            <el-input
              v-else-if="cimPanelData.emitterStr === 'SphereEmitter'"
              v-model.number="cimPanelData.sphereRadius"
              @change="updateEffect"
            ></el-input>
            <el-input
              v-else-if="cimPanelData.emitterStr === 'ConeEmitter'"
              v-model.number="cimPanelData.coneAngle"
              @change="updateEffect"
            ></el-input>
            <div v-else style="display: flex">
              <el-input v-model.number="cimPanelData.box_x" @change="updateEffect"></el-input>
              <el-input v-model.number="cimPanelData.box_y" @change="updateEffect"></el-input>
              <el-input v-model.number="cimPanelData.box_z" @change="updateEffect"></el-input>
            </div>
          </div>
        </div>
      </div>
    </el-form-item>
    <el-form-item label="">
      <div class="row-item">
        <div class="row-item-col column">
          <div class="title">粒子图像最小边界</div>
          <div class="content">
            <el-input
              class="mr12"
              v-model.number="cimPanelData.minimumImageSizeWidth"
              @change="updateEffect"
            ></el-input>
            <el-input
              v-model.number="cimPanelData.minimumImageSizeHeight"
              @change="updateEffect"
            ></el-input>
          </div>
        </div>
        <div class="row-item-col column">
          <div class="title">粒子图像最大边界</div>
          <div class="content">
            <el-input
              class="mr12"
              v-model.number="cimPanelData.maximumImageSizeWidth"
              @change="updateEffect"
            ></el-input>
            <el-input
              v-model.number="cimPanelData.maximumImageSizeHeight"
              @change="updateEffect"
            ></el-input>
          </div>
        </div>
      </div>
    </el-form-item>
    <el-form-item label="">
      <div class="row-item">
        <div class="row-item-col column">
          <div class="title">发射速率(个秒)</div>
          <div class="content">
            <el-slider
              show-input
              v-model="cimPanelData.emissionRate"
              @change="updateEffect"
            ></el-slider>
          </div>
        </div>
        <div class="row-item-col column">
          <div class="title">发射粒子时间</div>
          <div class="content">
            <el-slider
              show-input
              v-model="cimPanelData.lifetime"
              @change="updateEffect"
            ></el-slider>
          </div>
        </div>
      </div>
    </el-form-item>
    <el-form-item label="">
      <div class="row-item">
        <div class="row-item-col column">
          <div class="title">初始比例</div>
          <div class="content">
            <el-slider
              show-input
              v-model="cimPanelData.startScale"
              @change="updateEffect"
            ></el-slider>
          </div>
        </div>
        <div class="row-item-col column">
          <div class="title">最终比例</div>
          <div class="content">
            <el-slider
              show-input
              v-model="cimPanelData.endScale"
              @change="updateEffect"
            ></el-slider>
          </div>
        </div>
      </div>
    </el-form-item>
    <el-form-item label="">
      <div class="row-item">
        <div class="row-item-col column">
          <div class="title">最小速度</div>
          <div class="content">
            <el-slider
              show-input
              v-model="cimPanelData.minimumSpeed"
              @change="updateEffect"
            ></el-slider>
          </div>
        </div>
        <div class="row-item-col column">
          <div class="title">最大速度</div>
          <div class="content">
            <el-slider
              show-input
              v-model="cimPanelData.maximumSpeed"
              @change="updateEffect"
            ></el-slider>
          </div>
        </div>
      </div>
    </el-form-item>
    <el-form-item label="">
      <div class="row-item">
        <div class="row-item-col column">
          <div class="title">最小可持续时间</div>
          <div class="content">
            <el-slider
              show-input
              v-model="cimPanelData.minimumParticleLife"
              @change="updateEffect"
            ></el-slider>
          </div>
        </div>
        <div class="row-item-col column">
          <div class="title">最大可持续时间</div>
          <div class="content">
            <el-slider
              show-input
              v-model="cimPanelData.maximumParticleLife"
              @change="updateEffect"
            ></el-slider>
          </div>
        </div>
      </div>
    </el-form-item>
    <el-form-item label="">
      <div class="row-item">
        <div class="row-item-col column">
          <div class="title">最小质量</div>
          <div class="content">
            <el-slider
              show-input
              v-model="cimPanelData.minimumMass"
              @change="updateEffect"
            ></el-slider>
          </div>
        </div>
        <div class="row-item-col column">
          <div class="title">最大质量</div>
          <div class="content">
            <el-slider
              show-input
              v-model="cimPanelData.maximumMass"
              @change="updateEffect"
            ></el-slider>
          </div>
        </div>
      </div>
    </el-form-item>
  </el-form>
</template>
<script setup lang="ts">
interface IProps {
  panelData: any;
}

const props = withDefaults(defineProps<IProps>(), {
  panelData: {},
});
const emits = defineEmits(['update', 'updateEffect', 'choosePic']);

const cimPanelData = ref<any>({});
// 粒子发射器类型
const emitterOptions = ref<any>([
  {
    label: 'CircleEmitter',
    value: 'CircleEmitter',
  },
  {
    label: 'SphereEmitter',
    value: 'SphereEmitter',
  },
  {
    label: 'ConeEmitter',
    value: 'ConeEmitter',
  },
  {
    label: 'BoxEmitter',
    value: 'BoxEmitter',
  },
]);

function updateAttr() {
  emits('update', cimPanelData.value);
}

function updateEffect() {
  emits('updateEffect', cimPanelData.value);
}

function choosePic() {
  emits('choosePic');
}

watchEffect(() => {
  cimPanelData.value = props.panelData;
});
</script>

<style lang="less" scoped>
.ml10 {
  margin-left: 10px;
}
.mr12 {
  margin-right: 12px;
}
.style-image {
  &-wrap {
    width: 80px;
    height: 80px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    overflow: hidden;
    .el-image {
      width: 100%;
      height: 100%;
    }
  }
  &-btn {
    color: #0560fd;
    cursor: pointer;
    margin-left: 20px;
  }
}
.emitter-wrap {
  .el-select,
  .el-input {
    margin-right: 10px;
    &:last-child {
      margin-right: 0px;
    }
  }
  .el-select {
    flex: 0 0 108px !important;
  }
  .el-input {
    flex: 0 0 60px !important;
    margin-right: 4px;
  }
}
</style>
